<script setup>
import { ref } from "vue";
import { usePageStore } from "@/store/modules/usePageStore.js";
import BaseAside from "@/components/layouts/BaseAside.vue";
import BaseHeader from "@/components/layouts/BaseHeader.vue";

const Finish = ref(true);
Finish.value = usePageStore().Finish;
usePageStore().$subscribe((mutation, state) => {
  Finish.value = state.Finish;
});
</script>
<template>
  <div>
    <div class="ez-Main">
      <aside class="Left">
        <BaseAside />
      </aside>
      <div class="Right">
        <header class="Top">
          <BaseHeader />
        </header>
        <div class="Content" v-loading="!Finish" element-loading-text="加载中...">
          <div v-if="Finish"><router-view /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ez-Main {
  width: 100%;
  height: 100%;
  background: var(--ez-bg-color);
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;

  .Left {
    height: 100vh;
    flex-shrink: 0;
  }

  .Right {
    height: 100vh;
    width: 100%;
    overflow: hidden;

    .Top {
      width: 100%;
    }

    .Content {
      height: 100%;
      background: var(--ez-fill-color);
      padding: 12px;
    }
  }
}
</style>
